<template>
  <div class="bottom">
    <p v-for="(item , index) in arr" :key="index" @click="add(index)" :class=" index == indexs ? 'change' : '' ">{{item}}</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      arr:['首页' , '订单' , '我的'],
      indexs:null
    }
    
  },
  methods:{
    add(index){
      this.indexs == index ? this.indexs = null : this.indexs = index
    }
  }
}
</script>

<style>
.bottom{
    display: flex;
    height: 46px;
    justify-content: space-around;
}
p{
  line-height: 46px;
}
.change{
  color: blue;
}
</style>